<template>
  <div class="userInfo">
   <div class="user">
     <div class="bgc"></div>
     <div>
       <van-filed name="uploader" class="user-img">
         <template #input class="input">
           <van-uploader v-model="uploader"></van-uploader>
         </template>
       </van-filed>
     </div>
    <p class="p1">
      <span @click="login" v-if="!isShow">立即登录</span>
      <span v-if="isShow">{{mobile}}</span>
    </p>
    <p class="p2">积分：</p>
    <p class="p3" v-if="isShow"><span @click="del">退出</span></p>
   </div>
    <van-notice-bar scrollable text="新上线更稳定的付费快速查询接口" background="#fff">
      <template #left-icon>
        <span>
          <van-icon name="volumn-o"></van-icon>
        </span>
      </template>
    </van-notice-bar>
   <van-cell title="我的订单" icon="shop-o" class="myorder" @click="goanther('/dingdan')">
   <template #right-icon>
        <van-icon name="arrow" class="search=icon"> </van-icon>

   </template>
   </van-cell>
   <!-- 下面的订单详情栏目九宫格 -->
   <van-grid class="van_grid">
      <van-grid-item icon="balance-pay" text="待付款"></van-grid-item>
      <van-grid-item icon="send-gift-o" text="待发货"></van-grid-item>
      <van-grid-item icon="logistics" text="待收货"></van-grid-item>
      <van-grid-item icon="comment-o" text="待评价" @click="goanther('/pingjia')"></van-grid-item>
   </van-grid>

   <van-grid :column-num="3">
      <van-grid-item icon="refund-o" text="我的余额"></van-grid-item>
      <van-grid-item icon="edit" text="我的砍价"></van-grid-item>
      <van-grid-item icon="coupon-o" text="我的礼券"></van-grid-item>
      <van-grid-item icon="star-o" text="我的收藏"></van-grid-item>
      <van-grid-item icon="location-o" text="我的地址" @click="goanther('/dizhi')"></van-grid-item>
      <van-grid-item icon="service-o" text="联系客服"></van-grid-item>
   </van-grid>
   <div class="boooo">The work of LIU tao</div>
  </div>
</template>

<script>
import userUtils from "../../utils/userUtils"
export default {
  data() {
    return {
      show: false,
      index: 1,
        uploader: [{ url: 'http://localhost:8080/image/5.jpg' }],
    };
  },
  computed:{
    mobile:function(){
      return this.$store.state.userStore.mobile
    },
    isShow:function(){
      console.log(userUtils.isLogin())
      return this.$store.state.userStore.isLogin
    }
  },
  watch(){

  },
  mounted(){
    if(this.$store.state.userStore.isLogin){
      this.$store.dispatch("get_user_info")
    }
    userUtils.isLogin()
  },
  methods: {
    onChange(index) {
      this.index = index;
    },
    showImg() {
      this.show = true;
    },
    login() {
      this.$router.push({
        path: "/login",
      });
    },
    del(){
      localStorage.removeItem("token")
      userUtils.isLogin()
      this.$router.push({
        path:"/login"
      })
    },
    goanther(url){
      this.$router.push({
        path:url
      })
    }
  },
};
</script>

<style scoped>
.bgc {
  width: 100%;
  height: 3.15rem;
  display: block;
  background: #c1b18f;
}
.user-img {
  width: 1.56rem;
  height: 1.56rem;
  border-radius: 50%;
  position: absolute;
  left: 0.2rem;
  top: 0.5rem;
  align-items: center;
  overflow: hidden;
}
.user-img img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.wrapper {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 100%;
  height: 50%;
  background-color: #fff;
}
.p1 {
  font-size: 0.3rem;
  color: white;
  position: absolute;
  left: 2.3rem;
  top: 0.5rem;
}
.p2 {
  width: 2rem;
  padding: 0.1rem;
  color: #fff;
  background: #b3a078;
  border-radius: 0.0694444444rem;
  position: absolute;
  left: 2.3rem;
  top: 1.4rem;
  opacity: 0.8;
  font-size: 0.14rem;
}
.myorder {
  border-top: 0.16rem solid #f5f5f5;
  border-bottom: 0.01rem solid #e9e9e9;
}
.van_grid {
  border-bottom: 0.16rem solid #f5f5f5;
}
.boooo {
  height: 0.3rem;
  background: #f5f5f5;
  text-align: center;
  line-height: 0.3rem;
  color: #6d6d6d;
  font-size: 0.16rem;
}
.input{
  position: relative;
  top: 0rem;
  right: 0rem;
}
.p3{
      overflow: hidden;
    position: absolute;
    left: 2.3rem;
    top: 2rem;
    font-size: 0.26rem;
    color: white;
}
</style>